<template>
    <div class="home">
        <block-loading :loading="blockLoading">
            <van-row type="flex" justify="space-between" class="banner">
                <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_run.png')"/>
                <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
            </van-row>
            <van-cell-group class="main_panel">
                <h3 class="title"><span><font>定制套餐内容</font></span></h3>
                <van-form @submit="paymentHandel" class="form_panel">
                    <van-field name="stepper" label="班级数量" input-align="right">
                        <template #input>
                            <van-stepper v-model="formData.class_num" :decimal-length="0" :min="3" :max="30"/>
                        </template>
                    </van-field>
                    <van-field name="radio" label="每周课程" input-align="right">
                        <template #input>
                            <van-radio-group v-model="formData.course" direction="horizontal">
                                <van-radio class="radio" name="2" checked-color="#FF804E">每周两节</van-radio>
                                <!--<van-radio class="radio" name="4" checked-color="#FF804E">每周四节</van-radio>-->
                            </van-radio-group>
                        </template>
                    </van-field>
                    <div class="buy_info">
                        <p class="info">定制内容：{{formData.class_num}}个班+每周{{formData.course == 2 ? '二' : '四'}}节课</p>
                        <div class="price">金额：<font>¥</font><span>{{price}}</span></div>
                    </div>
                    <div>
                        <van-button block
                                    type="warning"
                                    native-type="submit"
                                    class="confirm_btn"
                                    :loading="btnLoading"
                                    :disabled="btnLoading"
                                    loading-text="支付中...">
                            立即支付
                        </van-button>
                    </div>
                </van-form>
            </van-cell-group>
        </block-loading>
    </div>
</template>

<script>
// @ is an alias to /src
import $api from "@/api/index"
import WxJsSdk from "@/utils/WxJsSdk"
import configEnv from '_conf'
export default {
  name: "courseBuy",
  components: {},
  data() {
    return {
      price: 0,
      code: '123123',
      formData: {
        openid: '',
        class_num: 1,
        course: '2'
      },
      btnLoading: false,
      blockLoading: false,
    };
  },
  watch: {
    formData: {
      handler(newName, oldName) {
        this.setPrice()
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    const openid = localStorage.getItem('openId')
    if (openid) {
      this.getSchoolState(openid)
      this.setWxJsSdk() //设置微信SDK
      this.openid=openid
    }
  },
  methods: {
    setPrice(){
      this.price = this.formData.class_num * this.formData.course * 100
    },
    getSchoolState(openid){
      $api.user.getSchoolState({openid}).then(res=>{
        if (res.data.order_state == 1)  {
          if (res.data.school_state == 1) {
            this.$router.push("/select_class")
          }else{
            let order_number=res.data.order_number
            this.$router.push({path: "/school_set", query: {order_number}});
          }
        }
      })
    },
    setWxJsSdk(){
      this.blockLoading = true
      var url = window.location.href// 获取页面url
      $api.user.getJsSdkString({url}).then(res => {
        this.wxJsSdk = new WxJsSdk(res.data);
        this.blockLoading = false
      })
    },
    // 支付
    paymentHandel(){
      if(!this.openid){
        this.$dialog.alert({
          title: '友情提示',
          message: '请授权页面',
          theme: 'round-button',
          overlay:true
        }).then(() => {
          location.reload()
        });
        return false
      }
      let formData = this.formData
      this.btnLoading = true
      formData.openid = this.openid
      let _this=this
      $api.user.toPayment(formData).then(res => {
        let data=res.data
        let order_number = res.data.order_number
        if (data.order_state == 0) { //开始支付
          let paymentParamas = JSON.parse(data.wx_order.jsApiParameters)
          _this.wxJsSdk.wxPay(paymentParamas).then(payStatus => {
            if (payStatus === 0) {
              // 支付成功
              _this.$router.push({path: "/school_set", query: {order_number}});
            } else if (payStatus === 1) {
              // 支付失败
            } else if (payStatus === 0) {
              // 取消支付
            }
          })
        } else {
          this.btnLoading = true
          if (data.school_state == 1) {
            // 已购买并且填写学校信息，直接跳转登录页
            this.$toast({
              message: res.message,
              duration: 1200,
              onClose(){
                _this.$router.push("/school_set");
              }
            });
          } else if (data.school_state == 0) {
            // 已购买未填写学校信息，跳转设置学校信息页面
            this.$toast({
              message: res.message,
              duration: 1200,
              onClose(){
                _this.$router.push({path: "/school_set", query: {order_number}});
              }
            });
          }
        }
      }).finally(()=>{
        this.btnLoading = false
      })
    }
  },
};
</script>
<style lang="scss" scoped>
    ::v-deep {
        .banner .banner_left {
            width: 287px;
            height: 280px;
            margin-top: -10px;
        }
        .main_panel {
            padding: 40px 10px;
            .title {
                text-align: center;
                font-size: 32px;
                font-weight: bold;
                margin: 0;
                color: #292929;
                span {
                    position: relative;
                    padding: 0 10px;
                    font {
                        z-index: 2;
                        position: relative;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 2px;
                        left: 0;
                        width: 100%;
                        height: 6px;
                        background: #FF804E;
                        border-radius: 3px;
                        z-index: 1;
                    }
                }
            }
        }
        .form_panel {
            padding-top: 40px;
            .van-cell {
                padding-left: 20px;
                padding-right: 20px;
                &:after {
                    left: 0;
                    right: 0
                }
                .van-field__label {
                    font-size: 26px;
                    color: #777;
                }
                .radio {
                    font-size: 28px;
                }
            }
        }
        .confirm_btn {
            width: 376px;
            height: 74px;
            background: linear-gradient(180deg, #FF9C70 0%, #FF804E 100%);
            border-radius: 10px;
            font-size: 28px;
            margin: 90px auto;
        }
        .buy_info {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            padding: 20px 20px;
            .info {
                font-size: 24px;
                font-weight: 500;
                color: #999999;
            }
            .price {
                color: #999999;
                font-size: 28px;
                display: flex;
                align-items: baseline;
                font {
                    color: #FF3535;
                }
            ;
                span {
                    font-size: 46px;
                    color: #FF3535;
                }
            }
        }
    }
</style>
